<template>
  <div class="commission">
    <div class="flex-c">
      <el-form-item label="店铺合作价">
        <el-input v-model="storePrice" style="width:100px" />元
      </el-form-item>
      <el-form-item label="菜品销售价" style="margin-left: 20px;">
        {{ salePrice }}元
        <!-- <el-input v-model="salePrice" style="width:100px" readonly/> -->
      </el-form-item>
    </div>

    <el-form-item v-for="item in radioList" :label="item.title" class="com-item">
      <el-radio-group v-model="labelVal">
        <el-radio v-for="radio in item.radios" :label="radio.label" size="large" border>
          <span class="radio-label">{{ radio.itemText }}</span>
          <el-input-number v-model="radio.inputVal" :controls="false" :min="0" :max="radio.label == 1 ? 9999 : 100" />
          <span v-if="radio.label > 1">% 折合：{{ radio.calcd }}</span>
          <span class="unit-text">{{ unitText }}</span>
        </el-radio>
      </el-radio-group>
    </el-form-item>

  </div>
</template>
<script setup>
import { ref, reactive, watchEffect, watch } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  dataObj: {
    type: Object,
  },
});

console.log('commission props.dataObj:', props.dataObj)
const emits = defineEmits(["clickQuery", 'clickAdd']);
// storePrice入参是分，先转元。组件输出也按分。dataObj里价格数据都这样处理
const storePrice = ref(Number((props.dataObj.storePrice / 100).toFixed(2)))
const salePrice = ref(0);

const labelVal = ref(1)   // 抽佣类型
let radioList = ref([
  {
    title: '站长抽佣',
    // labelVal: 1,
    radios: [
      { label: 1, inputVal: 0, itemText: '固定值' },
      { label: 2, inputVal: 10, itemText: '销售价比例', calcd: 0 },
      { label: 3, inputVal: 5, itemText: '合作价比例', calcd: 0 },
    ]
  },
  {
    title: '平台抽佣',
    // labelVal: 1,
    radios: [
      { label: 1, inputVal: 0, itemText: '固定值' },
      { label: 2, inputVal: 10, itemText: '销售价比例', calcd: 0 },
      { label: 3, inputVal: 5, itemText: '合作价比例', calcd: 0 },
    ]
  },
])
let unitText = '元/单'
initData();

watchEffect(() => {
  // 校验输入值
  radioList.value.forEach(item => {
    item.radios.forEach(radio => {
      // 值不能为空
      if (radio.inputVal == null || radio.inputVal === '') {
        radio.inputVal = 0;
      }
      // 不含e
      if ((radio.inputVal + '').includes('e')) {
        radio.inputVal = (radio.inputVal + '').replace('e', '');
        radio.inputVal = radio.inputVal === '' ? 0 : radio.inputVal;
      }
    })
  })

  // 计算销售价以及展示的calcd
  let siteMaster = radioList.value[0].radios
  let platForm = radioList.value[1].radios
  let _storePrice = Number(storePrice.value)

  if (labelVal.value == 1) {
    let addPrice = siteMaster[0].inputVal + platForm[0].inputVal
    salePrice.value = (_storePrice + addPrice).toFixed(2)
  } else if (labelVal.value == 2) {
    /* 
      店铺合作价：x，销售价为：y ，站长销售价抽佣比例：t1， 平台销售价抽佣比例：t2
        x + 0.01 * t1 * y + 0.01 * t2 * y = y
        y = x / (1-0.01*(t1+t2))
      */
    let _salePrice = _storePrice / (1 - 0.01 * (siteMaster[1].inputVal + platForm[1].inputVal))
    siteMaster[1].calcd = (siteMaster[1].inputVal * 0.01 * _salePrice).toFixed(2)
    platForm[1].calcd = (platForm[1].inputVal * 0.01 * _salePrice).toFixed(2)
    salePrice.value = _salePrice.toFixed(2);
  } else if (labelVal.value == 3) {
    siteMaster[2].calcd = (_storePrice * siteMaster[2].inputVal * 0.01).toFixed(2) - 0
    platForm[2].calcd = (_storePrice * platForm[2].inputVal * 0.01).toFixed(2) - 0
    salePrice.value = (_storePrice + siteMaster[2].calcd + platForm[2].calcd).toFixed(2);
  }

})

/* ---------methods--------- */

// 初始化数据
function initData() {
  // 抽佣类型
  if (!isNaN(Number(props.dataObj.platFormCommissionType))) {
    labelVal.value = Number(props.dataObj.platFormCommissionType)
  }

  let list = [props.dataObj.siteMasterCommissionValue, props.dataObj.platFormCommissionValue]
  radioList.value.forEach((item, index) => {
    let radioItem = item.radios.find(val => val.label == labelVal.value);
    if (radioItem) {
      // 若是1，是金额，转成元
      radioItem.inputVal = labelVal.value == 1 ? Number((list[index] / 100).toFixed(2)) : list[index]
    }
  })
  console.log(radioList.value)
}

// 暴露数据
function getData() {
  // let siteMasterCommissionType = radioList.value[0].labelVal;
  let siteMasterCommissionType = labelVal.value;
  let siteMasterCommissionValue = radioList.value[0].radios.find(val => labelVal.value == val.label).inputVal ;
  let platFormCommissionType = labelVal.value;
  let platFormCommissionValue = radioList.value[1].radios.find(val => labelVal.value == val.label).inputVal ;
  if (labelVal.value == 1) {
    siteMasterCommissionValue = siteMasterCommissionValue * 100
    platFormCommissionValue = platFormCommissionValue * 100
  }
  return {
    siteMasterCommissionType,
    siteMasterCommissionValue,
    platFormCommissionType,
    platFormCommissionValue,
    salePrice: salePrice.value * 100,
    storePrice: storePrice.value * 100,
  }
}

// 对外暴露数据
defineExpose({
  getData: getData,
});
</script>

<style lang="scss" scoped>
.commission {
  width: 100%;

  &>.el-form-item {
    margin-top: 20px;
  }


  .el-radio.el-radio--large {
    height: 56px;
  }

  .com-item {
    :deep(.el-input) {
      width: 50px;
    }

    .el-input-number {
      width: auto;

      :deep(.el-input__wrapper) {
        padding: 0px;
      }
    }
  }

  .radio-label {
    margin-right: 8px;
  }

  .unit-text {
    margin-left: 10px;
  }

}
</style>

